<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card :show-head="false" :border="false" margin="0">
							<view class="" slot="body">
								<view class="u-margin-top-20 u-margin-bottom-20">设备名称：{{deviceData.deviceName}}</view>
								<view class="u-margin-top-20 u-margin-bottom-20">IMEI号：{{deviceData.deviceCode}}</view>
								<view>输出状态：</view>
								<view v-if="deviceParam.deviceState">
									<u-row gutter="16" class="u-margin-top-20 u-margin-bottom-20">
										<u-col span="6" v-for="(item,index) in deviceParam.functions"
											:key="item.functionId" class="u-margin-bottom-20">
											<text v-if="verificationEmpty(deviceParam.deviceState[item.functionCode])">
												{{item.functionName}}：{{formatStauts(deviceParam.deviceState[item.functionCode])}}
											</text>
										</u-col>
									</u-row>
								</view>
								<view>传感参数：</view>
								<view v-if="deviceParam.deviceState">
									<u-row gutter="16" class="u-margin-top-20 u-margin-bottom-20">
										<u-col span="6" v-for="(item,index) in deviceTypeList.deviceTypeDataList"
											:key="item.dataId" class="u-margin-bottom-20">
											<text v-if="verificationEmpty(deviceParam.deviceState[item.dataUnit])">
												{{item.dataName}}：{{deviceParam.deviceState[item.dataUnit]}}{{item.dataSymbol}}
											</text>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-alert-tips type="warning" :show-icon="true" :description="tipsDescription"
							v-if="paramCtrolData&&paramCtrolData.SysMode!=1" class="u-margin-30"></u-alert-tips>
						<u-card :show-head="false" :border="false" margin="0"
							v-if="paramCtrolData && deviceParam.deviceState">
							<view class="" slot="body">
								<u-row gutter="16" class="u-margin-top-20 u-margin-bottom-20"
									v-for="(item,index) in deviceParam.functions" :key="item.functionId">
									<u-col span="5">
										{{item.functionName}}
									</u-col>
									<u-col span="3">
										状态：{{formatStauts(deviceParam.deviceState[item.functionCode])}}
									</u-col>
									<u-col span="4" text-align="right">
										<button type="primary" size="mini" class="ctrol-btn"
											:disabled="paramCtrolData.SysMode!=1"
											v-for="(item1,index1) in deviceTypeList.deviceStatusList"
											:key="item1.statusId" @click="clickBtn(item1,item)"
											:class="index1%2 == 0 ? 'btn-off-on' : ''">
											{{item1.statusName}}
										</button>
									</u-col>
								</u-row>

							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card :show-head="false" :border="false" margin="0">
							<view class="" slot="body" style="padding:0 30rpx;">
								<view style="margin-bottom: 30rpx;">
									<checkbox-group @change="checkedTimeingData">
										<label>
											<checkbox value="1" :checked="realChecked" />实时数据
										</label>
									</checkbox-group>
									
								</view>
								<chart-com v-for="(item,index) in deviceParam.charts" :key="index"
									:chartData="item.data" :chartOpt="item.chartOpt">
								</chart-com>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card :show-head="false" :border="false" margin="0">
							<view class="" slot="body">
								<u-row gutter="16" class="u-margin-top-20 u-margin-bottom-20">
									<u-col span="12" v-if="deviceTime" text-align="center" class="u-margin-bottom-20">
										{{deviceTime}}
									</u-col>
									<u-col span="4" text-align="center">
										<button type="primary" size="mini" @click="readParam">读取参数</button>
									</u-col>
									<u-col span="4" text-align="center">
										<button type="primary" size="mini" @click="readDeviceTime">读取时钟</button>
									</u-col>
									<u-col span="4" text-align="center">
										<button type="primary" size="mini" @click="setDeviceTime">同步时钟</button>
									</u-col>
								</u-row>
								<u-cell-group :border="false">
									<u-cell-item class="cell-item-style" value="设置" v-for="(item,index) in ctrParams"
										:key="index" @click="clickParamBtn(item,index)">
										<view slot="title">
											{{item}}：
										</view>
										<view slot="label" v-if="paramCtrolData">
											<view v-if="index==0">
												<text
													class="label-style">{{paramCtrolData.SysMode == 1 ? '手动' : '自动'}}</text>
												<text class="label-style">延时恢复自动时间：{{paramCtrolData.Delay}}</text>
											</view>
											<view v-if="index==1">
												<text
													class="label-style">{{paramCtrolData.Run_TimeParam == 1? '启用' : '禁用'}}</text>
												<text
													class="label-style">开始时间：{{getHourSecondM(paramCtrolData.Run_Start)}}</text>
												<text
													class="label-style">结束时间：{{getHourSecondM(paramCtrolData.Run_End)}}</text>
											</view>
											<view v-if="index==2">
												<text
													class="label-style">{{paramCtrolData.IN_TimeParam == 1? '启用' : '禁用'}}</text>
												<text
													class="label-style">进水开始时间：{{getHourSecondM(paramCtrolData.IN_Start)}}</text>
												<text
													class="label-style">液位转换时间：{{getHourSecondM(paramCtrolData.IN_Convert)}}</text>
												<text
													class="label-style">进水结束时间：{{getHourSecondM(paramCtrolData.IN_End)}}</text>
											</view>
											<view v-if="index==3">
												<text
													class="label-style">{{paramCtrolData.OUT_TimeParam == 1? '启用' : '禁用'}}</text>
												<text
													class="label-style">1开始时间：{{getHourSecondM(paramCtrolData.OUT1_Start)}}</text>
												<text
													class="label-style">1结束时间：{{getHourSecondM(paramCtrolData.OUT1_End)}}</text>
												<text
													class="label-style">2开始时间：{{getHourSecondM(paramCtrolData.OUT2_Start)}}</text>
												<text
													class="label-style">2结束时间：{{getHourSecondM(paramCtrolData.OUT2_End)}}</text>
												<text
													class="label-style">3开始时间：{{getHourSecondM(paramCtrolData.OUT3_Start)}}</text>
												<text
													class="label-style">3结束时间：{{getHourSecondM(paramCtrolData.OUT3_End)}}</text>
												<text
													class="label-style">4开始时间：{{getHourSecondM(paramCtrolData.OUT4_Start)}}</text>
												<text
													class="label-style">4结束时间：{{getHourSecondM(paramCtrolData.OUT4_End)}}</text>
											</view>
											<view v-if="index==4">
												<text
													class="label-style">{{paramCtrolData.Host_TempParam == 1? '启用' : '禁用'}}</text>
												<text class="label-style">高温：{{paramCtrolData.Host_TempH}}℃</text>
												<text class="label-style">低温：{{paramCtrolData.Host_TempL}}℃</text>
											</view>
											<view v-if="index==5">
												<text
													class="label-style">{{paramCtrolData.ReIN_TempParam == 1? '启用' : '禁用'}}</text>
												<text class="label-style">高温：{{paramCtrolData.ReIN_TempH}}℃</text>
												<text class="label-style">低温：{{paramCtrolData.ReIN_TempL}}℃</text>
											</view>
											<view v-if="index==6">
												<text
													class="label-style">{{paramCtrolData.Back_TempParam == 1? '启用' : '禁用'}}</text>
												<text class="label-style">高温：{{paramCtrolData.Back_TempH}}℃</text>
												<text class="label-style">低温：{{paramCtrolData.Back_TempL}}℃</text>
											</view>
											<view v-if="index==7">
												<text
													class="label-style">{{paramCtrolData.Solar_DiffParam == 1 ? '常开' : paramCtrolData.Solar_DiffParam == 2 ? '常关' : '自动'}}</text>
												<text class="label-style">上限：{{paramCtrolData.Solar_DiffH}}℃</text>
												<text class="label-style">下限：{{paramCtrolData.Solar_DiffL}}℃</text>
											</view>
											<view v-if="index==8">
												<text class="label-style">最大：{{paramCtrolData.WaterLevel_Max}}CM</text>
												<text class="label-style">最小：{{paramCtrolData.WaterLevel_Min}}CM</text>
											</view>
											<view v-if="index==9">
												<text class="label-style">1高值：{{paramCtrolData.Time1_WaterH}}CM</text>
												<text class="label-style">1低值：{{paramCtrolData.Time1_WaterL}}CM</text>
												<text class="label-style">2高值：{{paramCtrolData.Time2_WaterH}}CM</text>
												<text class="label-style">2低值：{{paramCtrolData.Time2_WaterL}}CM</text>
												<text
													class="label-style">安全值：{{paramCtrolData.WaterLevel_Alarm}}CM</text>
											</view>
										</view>
									</u-cell-item>
								</u-cell-group>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<u-modal v-model="paramShow" :title="paramTitle" width="95%" class="param-model" :show-cancel-button="true"
				@confirm="confirmModelParams">
				<view class="slot-content">
					<u-cell-group :border="false">
						<template v-if="paramSetIndex == 0">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'Sys_ConfigParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.Sys_ConfigParam)"
											:value="paramCtrolData.Sys_ConfigParam">{{ctrParams[0]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[0]}}：
									<!-- <u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.Sys_ConfigParam)"
										@click="paramsPickerEnable('Sys_ConfigParam')" /> -->
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<u-radio-group v-model="paramCtrolData.SysMode" @change="changeSysModel">
										<u-radio name="0">自动</u-radio>
										<u-radio name="1" :disabled="paramCtrolData.Delay<=0">手动 <text
												v-if="paramCtrolData.Delay<=0">(时间需大于0)</text></u-radio>
										<!-- <u-radio name="2">常关</u-radio> -->
									</u-radio-group>
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<text>延时恢复自动时间(分)：</text>
									<u-input type="number" v-model="paramCtrolData.Delay" />
								</view>
							</u-cell-item>
						</template>
						<template v-if="1 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'Run_TimeParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.Run_TimeParam)"
											:value="paramCtrolData.Run_TimeParam">
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[1]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.Run_TimeParam)"
										@click="paramsPickerEnable('Run_TimeParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>运行开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.Run_Start)"
											@click="paramsPicker('Run_Start')" />
									</view>
									<view class="u-flex">
										<text>运行结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.Run_End)"
											@click="paramsPicker('Run_End')" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="2 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'IN_TimeParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.IN_TimeParam)"
											:value="paramCtrolData.IN_TimeParam">{{ctrParams[2]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[2]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.IN_TimeParam)"
										@click="paramsPickerEnable('IN_TimeParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>进水开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.IN_Start)"
											@click="paramsPicker('IN_Start')" />
									</view>
									<view class="u-flex">
										<text>液位转换时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.IN_Convert)"
											@click="paramsPicker('IN_Convert')" />
									</view>
									<view class="u-flex">
										<text>进水结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.IN_End)"
											@click="paramsPicker('IN_End')" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="3 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'OUT_TimeParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.OUT_TimeParam)"
											:value="paramCtrolData.OUT_TimeParam">{{ctrParams[3]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[3]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.OUT_TimeParam)"
										@click="paramsPickerEnable('OUT_TimeParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>时间段1开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT1_Start)"
											@click="paramsPicker('OUT1_Start')" />
									</view>
									<view class="u-flex">
										<text>时间段1结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT1_End)"
											@click="paramsPicker('OUT1_End')" />
									</view>
									<view class="u-flex">
										<text>时间段2开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT2_Start)"
											@click="paramsPicker('OUT2_Start')" />
									</view>
									<view class="u-flex">
										<text>时间段2结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT2_End)"
											@click="paramsPicker('OUT2_End')" />
									</view>
									<view class="u-flex">
										<text>时间段3开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT3_Start)"
											@click="paramsPicker('OUT3_Start')" />
									</view>
									<view class="u-flex">
										<text>时间段3结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT3_End)"
											@click="paramsPicker('OUT3_End')" />
									</view>
									<view class="u-flex">
										<text>时间段4开始时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT4_Start)"
											@click="paramsPicker('OUT4_Start')" />
									</view>
									<view class="u-flex">
										<text>时间段4结束时间：</text>
										<u-input placeholder="请选择" type="select"
											:value="getHourSecondM(paramCtrolData.OUT4_End)"
											@click="paramsPicker('OUT4_End')" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="4 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'Host_TempParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.Host_TempParam)"
											:value="paramCtrolData.Host_TempParam">{{ctrParams[4]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[4]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.Host_TempParam)"
										@click="paramsPickerEnable('Host_TempParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>水箱高温设定(℃)：</text>
										<u-input v-model="paramCtrolData.Host_TempH" type="number" />
									</view>
									<view class="u-flex">
										<text>水箱低温设定(℃)：</text>
										<u-input v-model="paramCtrolData.Host_TempL" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="5 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'ReIN_TempParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.ReIN_TempParam)"
											:value="paramCtrolData.ReIN_TempParam">{{ctrParams[5]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[5]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.ReIN_TempParam)"
										@click="paramsPickerEnable('ReIN_TempParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>补水高温设定(℃)：</text>
										<u-input v-model="paramCtrolData.ReIN_TempH" type="number" />
									</view>
									<view class="u-flex">
										<text>补水低温设定(℃)：</text>
										<u-input v-model="paramCtrolData.ReIN_TempL" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="6 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'Back_TempParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.Back_TempParam)"
											:value="paramCtrolData.Back_TempParam">{{ctrParams[6]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[6]}}：
									<u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.Back_TempParam)"
										@click="paramsPickerEnable('Back_TempParam')" />
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>回水高温设定(℃)：</text>
										<u-input v-model="paramCtrolData.Back_TempH" type="number" />
									</view>
									<view class="u-flex">
										<text>回水低温设定(℃)：</text>
										<u-input v-model="paramCtrolData.Back_TempL" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="7 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'Solar_ConfigParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.Solar_ConfigParam)"
											:value="paramCtrolData.Solar_ConfigParam">{{ctrParams[7]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[7]}}：
									<!-- <u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.Solar_ConfigParam)"
										@click="paramsPickerEnable('Solar_ConfigParam')" /> -->
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<u-radio-group v-model="paramCtrolData.Solar_DiffParam">
										<u-radio name="0">自动</u-radio>
										<u-radio name="1">常开</u-radio>
										<u-radio name="2">常关</u-radio>
									</u-radio-group>
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>太阳能温差上限(℃)：</text>
										<u-input v-model="paramCtrolData.Solar_DiffH" type="number" />
									</view>
									<view class="u-flex">
										<text>太阳能温差下限(℃)：</text>
										<u-input v-model="paramCtrolData.Solar_DiffL" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="8 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'WaterLevel_ConfigParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.WaterLevel_ConfigParam)"
											:value="paramCtrolData.WaterLevel_ConfigParam">{{ctrParams[8]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[8]}}：
									<!-- <u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.WaterLevel_ConfigParam)"
										@click="paramsPickerEnable('WaterLevel_ConfigParam')" /> -->
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>液位量程最大值(CM)：</text>
										<u-input v-model="paramCtrolData.WaterLevel_Max" type="number" />
									</view>
									<view class="u-flex">
										<text>液位量程最小值(CM)：</text>
										<u-input v-model="paramCtrolData.WaterLevel_Min" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
						<template v-if="9 == paramSetIndex">
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title" class="u-flex">
									<!-- <checkbox-group @change="checkboxChange($event,'TimeWater_ConfigParam')">
										<checkbox :checked="formatCheckbox(paramCtrolData.TimeWater_ConfigParam)"
											:value="paramCtrolData.TimeWater_ConfigParam">{{ctrParams[9]}}：
										</checkbox>
									</checkbox-group> -->
									{{ctrParams[9]}}：
									<!-- <u-input placeholder="请选择" type="select" class="enabled-select"
										:value="formatEanable(paramCtrolData.TimeWater_ConfigParam)"
										@click="paramsPickerEnable('TimeWater_ConfigParam')" /> -->
								</view>
							</u-cell-item>
							<u-cell-item :border-bottom="false" :arrow="false" class="cell-item-style">
								<view slot="title">
									<view class="u-flex">
										<text>进水时段1液位高值(CM)：</text>
										<u-input v-model="paramCtrolData.Time1_WaterH" type="number" />
									</view>
									<view class="u-flex">
										<text>进水时段1液位低值(CM)：</text>
										<u-input v-model="paramCtrolData.Time1_WaterL" type="number" />
									</view>
									<view class="u-flex">
										<text>进水时段2液位高值(CM)：</text>
										<u-input v-model="paramCtrolData.Time2_WaterH" type="number" />
									</view>
									<view class="u-flex">
										<text>进水时段2液位低值(CM)：</text>
										<u-input v-model="paramCtrolData.Time2_WaterL" type="number" />
									</view>
									<view class="u-flex">
										<text>液位安全设定值(CM)：</text>
										<u-input v-model="paramCtrolData.WaterLevel_Alarm" type="number" />
									</view>
								</view>
							</u-cell-item>
						</template>
					</u-cell-group>
				</view>
			</u-modal>
		</view>
		<view>
			<u-picker v-model="paramPicker" mode="time" :params="pickerParams" @confirm="paramPickerConfirm"></u-picker>
			<u-select v-model="enableShow" :list="enableList" @confirm="enableSelect"></u-select>
		</view>
	</view>
</template>

<script>
	import chartCom from '../../../chart/index.vue'
	import {
		queryDeviceRunningData,
		manualControll,
		queryDeviceConfigParams,
		setDeviceConfigParams,
		getDeviceTypeInfo,
		readDeviceTime,
		setDeviceTime,
		readRealData,
		getSysConfigData
	} from '../../../../api/eqment/index.js'
	import {
		verificationEmpty
	} from '../../../../components/common/com.js';
	export default {
		components: {
			chartCom
		},
		data() {
			return {
				type: [],
				model: {},
				list: [{
						name: '基本信息'
					},
					{
						name: '远程开关'
					},
					{
						name: '参数图表'
					},
					{
						name: '控制参数'
					}
				],
				list1: [],
				list2: [],
				list3: [],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				deviceData: {},
				deviceParam: {},
				paramShow: false,
				paramTitle: '',
				enableShow: false,
				enableStr: '',
				enableList: [{
						value: '0',
						label: '禁用'
					},
					{
						value: '1',
						label: '启用'
					}
				],
				paramPicker: false,
				paramSetIndex: -1,
				pickerParams: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				paramCtrolData: null,
				paramCtrolDataStr: null,
				paramsPickerStr: '',
				constData: [{
						zsxwd: '主水箱温度'
					}, {
						fsxwd: '副水箱温度'
					}, {
						tyn1wd: '太阳能1温度'
					}, {
						tyn2wd: '太阳能2温度'
					}, {
						gswd: '供水温度'
					}, {
						hswd: '回水温度'
					}, {
						zj1wd: '主机1温度'
					},
					{
						zj2wd: '主机2温度'
					}, {
						ywsj: '液位实际值'
					}, {
						zjdl: '主机电流值'
					}, {
						csll: '出水瞬时流量'
					}, {
						ywgj: '烟雾告警状态'
					}, {
						zj1dy: '主机1电源'
					}, {
						zj2dy: '主机2电源'
					},
					{
						jsdcf: '进水电磁阀'
					}, {
						gsdcf: '供水电磁阀'
					}, {
						hsdcf: '回水电磁阀'
					}, {
						tynxhb1: '太阳能循环泵1'
					}, {
						tynxhb2: '太阳能循环泵2'
					}, {
						qszsd: '缺水指示灯'
					},
					{
						jsgzd: '进水故障灯'
					}, {
						ygbzd: '烟感报警灯'
					}
				],
				ctrParams: [
					'系统运行模式', '空气能主机电源运行时间', '进水时间控制', '出水时间控制',
					'水箱温度控制主机参数', '水箱温度控制补水参数', '水箱温度控制回水参数',
					'太阳能循环泵控制参数', '液位量程', '液位控制进水参数'
				],
				paramsGroup: [
					['SysMode', 'Delay', 'Sys_ConfigParam'],
					['Run'],
					['IN'],
					['OUT'],
					['Host'],
					['ReIN'],
					['Back'],
					['Solar'],
					['WaterLevel_Max', 'WaterLevel_Min', 'WaterLevel_ConfigParam'],
					['Time', 'WaterLevel_Alarm']
				],
				tipsDescription: '请先在控制参数页面设置系统运行模式为手动',
				deviceTypeList: [],
				flag: 0, // 0读数据库 1读取硬件
				deviceTime: '',
				realChecked: false,
				paramSetTimer: null,
				timerLength: 1000 * 60 * 40, //40分钟
				timerStartTime: 0,
				timerConfig: {
					autoRefreshFre: 40,
					realRefreshFre: 2,
					realRefreshRunTime: 5
				}
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: '设备参数'
			});
			uni.getStorage({
				key: 'list_item',
				success: (res) => {
					if (res.data) {
						this.deviceData = JSON.parse(res.data)
						this.getSysConfigData()
						this.queryDeviceRunningData()
						this.queryDeviceConfigParams()
						if (this.deviceData.functions.length > 0) {
							this.getDeviceTypeInfo(this.deviceData.functions[0].typeId)
						}
					}
				}
			})
		},
		onShow() {
			this.paramSetTimerInit()
		},
		onHide() {
			this.paramTimerClear()
		},
		onUnload(){
			this.paramTimerClear()
		},
		methods: {
			checkedTimeingData(val){
				let checkedVal = val ? val.detail.value : []
				this.realChecked = checkedVal.length>0?true:false
			    this.paramTimerClear()
			    if(this.realChecked){
			        this.timerStartTime = new Date().getTime()
			        this.timerLength = this.timerConfig.realRefreshFre*1000
			        this.readRealData()
			    }else{
			        this.timerLength = this.timerConfig.autoRefreshFre*1000
			    }
			    this.paramSetTimerInit()
			},
			paramSetTimerInit() {
			    this.paramTimerClear()
			    let $_this = this;
			    this.paramSetTimer = setInterval(function () {
			        //如果开启实时数据，则实时数据开始十分钟之后自动结束
			        let nowTimeEnd= new Date().getTime()
			        if($_this.realChecked && nowTimeEnd - $_this.timerStartTime > $_this.timerConfig.realRefreshFre*1000*$_this.timerConfig.realRefreshRunTime){
			            $_this.realChecked = false
			            $_this.checkedTimeingData()
			            return false;
			        }
			        if($_this.realChecked){
			            $_this.readRealData()
			        }else{
			            $_this.queryDeviceRunningData()
			        }
					console.log($_this.timerLength)
			    }, $_this.timerLength)
			},
			paramTimerClear() {
			    clearInterval(this.paramSetTimer);
			    this.paramSetTimer = null;
			},
			//获取设备类型的信息
			getDeviceTypeInfo(tId) {
				getDeviceTypeInfo({
					typeId: tId
				}).then((res) => {
					this.deviceTypeList = res.expandData
				})
			},
			//获取设备参数
			queryDeviceRunningData() {
				queryDeviceRunningData({
					deviceCode: this.deviceData.deviceCode,
					deviceId: this.deviceData.deviceId,
					"clientId": '' + this.deviceData.deviceCode,
				}).then((res) => {
					this.deviceParam = res
					console.log(123)
					const chartsList = res.charts
					this.deviceParam['charts'] = chartsList.map(item => {
						const seriesItem = item.demos.map((itemd, indexd) => {
							return {
								name: itemd,
								data: item.ys['y' + (indexd + 1)]
							}
						})
						const chartItem = {
							data: {
								categories: item.x,
								series: seriesItem,
								// [{
								// 	name: item.demo,
								// 	data: item.y
								// }]
							},
							chartOpt: {
								title: item.title,
								unit: item.unit
							}
						}
						return chartItem
					})
				})
			},
			// 检验
			verificationEmpty(key) {
				return verificationEmpty(key)
			},
			formatVal(val) {
				return val == '1' ? '开' : '关'
			},
			//点击控制按钮
			clickBtn(row1, row) {
				manualControll({
					"deviceCode": '' + this.deviceData.deviceCode,
					"functionCode": row.functionCode + row1.statusCode,
					"functionName": row.functionName,
					"typeId": row.typeId
				}).then(res => {
					if (res.suc) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'error',
							duration: 2000
						});
					}
				})
			},
			clickParamBtn(item, i) {
				this.paramShow = true
				this.paramTitle = item
				this.paramSetIndex = i
			},
			readParam() {
				this.flag = 1
				this.queryDeviceConfigParams()
			},
			//获取配置参数
			queryDeviceConfigParams() {
				queryDeviceConfigParams({
					clientId: '' + this.deviceData.deviceCode,
					flag: this.flag
				}).then((res) => {
					if (this.flag == 1 && res) {
						uni.showToast({
							title: '读取成功',
							icon: 'sucess',
							duration: 2000
						});
					}
					this.flag = 0
					this.paramCtrolDataStr = JSON.parse(JSON.stringify(res))
					this.paramCtrolData = res
					const fn = (str) => {
						let arr = ['Hour', 'Min', 'Sec']
						this.$set(this.paramCtrolData, str, this.formatTimes(res[str + arr[0]], res[str + arr[
							1]], res[str + arr[2]]))
					}
					fn('Run_Start')
					fn('Run_End')
					fn('IN_Start')
					fn('IN_Convert')
					fn('IN_End')
					fn('OUT1_Start')
					fn('OUT1_End')
					fn('OUT2_Start')
					fn('OUT2_End')
					fn('OUT3_Start')
					fn('OUT3_End')
					fn('OUT4_Start')
					fn('OUT4_End')
					this.$forceUpdate()
				})
			},
			//把具体的时，分，秒转化为标准时间
			formatTimes(s, f, m) {
				let ts = s,
					tf = f,
					tm = m
				// if (s.length <= 1) {
				// 	ts = '0' + s
				// }
				// if (f.length <= 1) {
				// 	tf = '0' + s
				// }
				// if (m.length <= 1) {
				// 	tm = '0' + s
				// }
				return new Date(2022, 9, 10, ts, tf, tm)
			},
			// 获取日期时间的时分秒
			getHourSecondM(tv) {
				let h = tv.getHours() < 10 ? '0' + tv.getHours() : tv.getHours()
				let m = tv.getMinutes() < 10 ? '0' + tv.getMinutes() : tv.getMinutes()
				let s = tv.getSeconds() < 10 ? '0' + tv.getSeconds() : tv.getSeconds()
				return h + ':' + m + ':' + s
			},
			confirmModelParams(obj) {
				if (this.paramSetIndex > 0) {
					this.submitCtrlParam()
				}
			},
			formatCheckbox(val) {
				return val == 1 ? true : false
			},
			checkboxChange(e, str) {
				if (e.detail.value.length > 0) {
					this.paramCtrolData[str] = '1'
				} else {
					this.paramCtrolData[str] = '0'
				}
			},
			paramsPicker(str) {
				this.paramPicker = true
				this.paramsPickerStr = str
				console.log('str===', str)
			},
			paramPickerConfirm(obj) {
				this.paramCtrolData[this.paramsPickerStr] = this.formatTimes(obj.hour, obj.minute, obj.second)
			},
			//点击修改配置数据
			submitCtrlParam() {
				//把具体的是时，分，秒重新赋值给对应的字段
				const fn = (str) => {
					let arr = ['Hour', 'Min', 'Sec']
					arr.map(item => {
						this.paramCtrolData[str + item] = this.timesToSplitTime(this.paramCtrolData[str], item)
					})
					// delete this.paramCtrolData[str]
				}
				fn('Run_Start')
				fn('Run_End')
				fn('IN_Start')
				fn('IN_Convert')
				fn('IN_End')
				fn('OUT1_Start')
				fn('OUT1_End')
				fn('OUT2_Start')
				fn('OUT2_End')
				fn('OUT3_Start')
				fn('OUT3_End')
				fn('OUT4_Start')
				fn('OUT4_End')
				//对比修改的数据字段及值
				// const params = this.getNoEqualObject(this.paramCtrolDataStr, this.paramCtrolData)
				const params = this.paramCtrolData

				//是否勾选的字段列表，
				const checkedKeys = ['Run_TimeParam', 'IN_TimeParam', 'OUT_TimeParam', 'Host_TempParam',
					'ReIN_TempParam', 'Back_TempParam', 'Solar_ConfigParam', 'Sys_ConfigParam',
					'TimeWater_ConfigParam', 'WaterLevel_ConfigParam'
				]
				//数据分组按groupList的数组字段进行分组
				const groupList = this.paramsGroup[this.paramSetIndex]
				// 数据分组
				let gropData = []
				let obj = {}
				console.log('params11111====', groupList, params)
				for (let key in params) {
					if ((groupList.includes(key) || key.indexOf(groupList[0]) == 0) && this.paramCtrolDataStr[key]) {
						console.log('params====', key, params[key])
						obj[key] = params[key]
					}
				}
				if (Object.keys(obj).length > 0) {
					gropData.push(obj)
				}
				// groupList.map(item => {
				// 	let obj = {}
				// 	for (let key in params) {
				// 		if ((item.includes(key) || key.indexOf(item[0]) == 0) && this.paramCtrolDataStr[key]) {
				// 			obj[key] = params[key]
				// 		}
				// 	}
				// 	if (Object.keys(obj).length > 0) {
				// 		gropData.push(obj)
				// 	}
				// })
				//分组的数据根据是否勾选启用进行进行筛选，勾选之后又取消勾选的则删除分组中的数据
				// let i = gropData.length;
				// while (i--) {
				// 	const keys = Object.keys(gropData[i])
				// 	const checkedItem = checkedKeys.filter(item => {
				// 		if (keys.includes(item)) {
				// 			return item
				// 		}
				// 	})
				// 	if (checkedItem.length == 0 || !gropData[i][checkedItem] || (gropData[i][checkedItem] && gropData[i][
				// 			checkedItem
				// 		] == 0)) {
				// 		gropData.splice(i, 1)
				// 	}
				// }
				// if (gropData.length == 0) {
				// 	uni.showToast({
				// 		title: '本次无修改数据',
				// 		icon: 'error',
				// 		duration: 2000
				// 	});
				// 	this.dialogParamVisible = false
				// 	return false
				// }
				// if (gropData.length > 1) {
				// 	uni.showToast({
				// 		title: '每次只可修改一组数据',
				// 		icon: 'error',
				// 		duration: 2000
				// 	});
				// 	return false
				// }
				const newParams = Object.assign(gropData[0], {
					clientId: '' + this.deviceData.deviceCode,
					groupId: this.paramSetIndex
				})
				setDeviceConfigParams(
					newParams
				).then(res => {
					this.queryDeviceConfigParams()
					if (res.ACK == 'fail') {
						uni.showToast({
							title: '修改失败',
							icon: 'error',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '修改成功',
							icon: 'sucess',
							duration: 2000
						});
						// this.queryDeviceConfigParams()
						// this.dialogParamVisible = false
					}
				})

			},
			// 系统模式
			changeSysModel() {
				this.submitCtrlParam()
			},
			//获取日期时间的具体时，分，秒
			timesToSplitTime(times, time) {
				if (time == 'Hour') {
					return times == 0 ? times : times.getHours()
				}
				if (time == 'Min') {
					return times == 0 ? times : times.getMinutes()
				}
				if (time == 'Sec') {
					return times == 0 ? times : times.getSeconds()
				}
			},
			formatStauts(val) {
				let stautsItem = this.deviceTypeList.deviceStatusList.find(item => val == item.statusCode)
				return stautsItem.statusName
			},
			//对比参数是否改变，如果改变了需要获取到改变的key和value
			getNoEqualObject(obj1, obj2) { //obj1源数据，obj2比较对象
				let newObj = {}
				for (let key in obj2) {
					if (obj1[key] != obj2[key]) {
						newObj[key] = obj2[key]
					}
				}
				return newObj
			},
			formatEanable(val) {
				return val == 1 ? '启用' : '禁用'
			},
			paramsPickerEnable(str) {
				this.enableShow = true
				this.enableStr = str
			},
			enableSelect(obj) {
				console.log('select', obj)
				this.paramCtrolData[this.enableStr] = obj[0].value
			},
			setDeviceTime() {
				setDeviceTime({
					"clientId": '' + this.deviceData.deviceCode,
				}).then(res => {
					let icon = 'success'
					if (res.suc) {
						icon = 'success'
						this.deviceTime = res.time
					} else {
						icon = 'error'
					}
					uni.showToast({
						title: res.message,
						icon: icon,
						duration: 2000
					});
				})
			},
			readDeviceTime() {
				readDeviceTime({
					"clientId": '' + this.deviceData.deviceCode,
				}).then(res => {
					let icon = 'success'
					if (res.suc) {
						icon = 'success'
						this.deviceTime = res.time
					} else {
						icon = 'error'
					}
					uni.showToast({
						title: res.message,
						icon: icon,
						duration: 2000
					});
				})
			},
			readRealData() {
				readRealData({
					"clientId": '' + this.deviceData.deviceCode
				}).then(res => {
					this.queryDeviceRunningData()
				})
			},
			getSysConfigData() {
				getSysConfigData().then(res => {
					res.map(item => {
						this.timerConfig[item.name] = item.value

					})
					console.log(this.timerConfig)
				})
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #ffffff;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.u-tabs-box {
		border-bottom: 1px solid #f2f2f2;
	}

	.btn-off-on {
		margin: 0 20rpx 0 0;
	}

	.ctrol-btn {
		font-size: 11px;
		padding: 0 1em
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.swiper-item {
		.cell-item-style {
			padding: 20rpx 0rpx;

			/deep/.u-cell__value {
				color: #2979ff;
			}

			/deep/.u-cell__right-icon-wrap {
				color: #2979ff;
			}

			/deep/.u-cell_title {
				width: 80% !important;
			}

			.label-style {
				margin-right: 20rpx;
			}
		}
	}

	.param-model {
		.cell-item-style {
			padding: 10rpx 30rpx;

			/deep/.u-cell_title {
				width: 100% !important;
				// flex: auto;
			}

			/deep/.enabled-select {
				min-height: 56rpx !important;
				width: 100rpx;
				flex: initial;
			}
		}

	}

	uni-checkbox {
		/deep/.uni-checkbox-input {
			width: 16px;
			height: 16px;
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
